<template>
  <div class="avatar-container">
    <!-- 当前头像展示 -->
    <div class="avatar-preview">
      <el-avatar
        :size="150"
        :src="currentAvatarUrl"
        class="current-avatar">
        <i class="el-icon-user-solid" v-if="!currentAvatarUrl"></i>
      </el-avatar>
      <div class="avatar-tip">当前头像</div>
    </div>

    <!-- 头像上传区域 -->
    <div class="avatar-upload">
      <el-upload
        class="avatar-uploader"
        :action="uploadUrl"
        :headers="uploadHeaders"
        :limit="1"
        :file-list="fileList"
        :before-upload="beforeUpload"
        :on-change="handleChange"
        :on-remove="handleRemove"
        :on-success="handleSuccess"
        :on-error="handleError"
        list-type="picture-card"
        :class="{ 'upload-disabled': isUploadDisabled }">
        
        <i class="el-icon-plus avatar-uploader-icon"></i>
        <div slot="tip" class="upload-tip">
          支持JPG/PNG格式，大小不超过2MB
        </div>
      </el-upload>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    cUserAvatar: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      uploadUrl: this.$store.state.fileUploadRoad + "/file/upload/avatar",
      uploadHeaders: {
        Authorization: window.localStorage.token
      },
      fileList: [],
      isUploadDisabled: false
    };
  },
  computed: {
    currentAvatarUrl() {
      return this.cUserAvatar 
        ? this.$store.state.imgShowRoad + '/file/' + this.cUserAvatar 
        : '';
    }
  },
  methods: {
    beforeUpload(file) {
      const isImage = file.type.includes('image/');
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isImage) {
        this.$message.error('只能上传图片文件!');
      }
      if (!isLt2M) {
        this.$message.error('图片大小不能超过2MB!');
      }

      return isImage && isLt2M;
    },
    handleError(err) {
      this.$message.error('头像上传失败');
      console.error(err);
    },
    handleSuccess(response, file) {
      if (response.flag) {
        this.$message.success('头像上传成功');
        this.$emit('update:avatar', response.data);
        this.isUploadDisabled = true;
      } else {
        this.$message.error(response.data || '头像上传失败');
      }
    },
    handleChange(file, fileList) {
      this.isUploadDisabled = fileList.length >= 1;
    },
    handleRemove() {
      this.isUploadDisabled = false;
      this.fileList = [];
      this.$emit('update:avatar', '');
    }
  }
};
</script>

<style lang="less" scoped>
.avatar-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);

  .avatar-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 50px;

    .current-avatar {
      border: 1px solid #f2f2f2;
      margin-bottom: 10px;
      
      i {
        font-size: 60px;
        color: #c0c4cc;
      }
    }

    .avatar-tip {
      color: #909399;
      font-size: 14px;
    }
  }

  .avatar-upload {
    .avatar-uploader {
      /deep/ .el-upload {
        width: 150px;
        height: 150px;
        line-height: 150px;
        border-radius: 50%;
        border: 1px dashed #d9d9d9;
        transition: all 0.3s;

        &:hover {
          border-color: #67C23A;
        }

        .avatar-uploader-icon {
          font-size: 28px;
          color: #8c939d;
        }
      }

      /deep/ .el-upload-list__item {
        width: 150px;
        height: 150px;
        border-radius: 50%;
      }

      .upload-tip {
        margin-top: 10px;
        font-size: 12px;
        color: #909399;
        text-align: center;
      }
    }

    .upload-disabled {
      /deep/ .el-upload {
        display: none;
      }
    }
  }
}
</style>